<template>
  <el-card class="card_box card_header_top">
    <template #header>
      <div class="card_header">
        <span class="card_title">开票记录</span>
      </div>
    </template>
    <el-form ref="formRef" :model="form.data" inline>
      <el-row justify="space-between">
        <el-col :span="30">
          <el-form-item label="缴费时间">
            <el-date-picker
                v-model="form.data.paymentDate"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                @change="paymentChangeTime"
                clearable
                :editable="false"
                :class="form.data.paymentDate.length ? 'date_prefix_show':'date_prefix_close'"
                style="width: 255px !important;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开票时间">
            <el-date-picker
                v-model="form.data.invoicingDate"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                @change="invoicingChangeTime"
                clearable
                :editable="false"
                :class="form.data.invoicingDate.length ? 'date_prefix_show':'date_prefix_close'"
                style="width: 255px !important;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="initialize()">查询</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 表格主体 -->
  <el-card>
    <template #header>
      <div class="card_header">
        <span class="card_title">列表展示</span>
      </div>
    </template>
    <div class="global_table_wrapper">
      <el-table
          :data="dataList.data"
          highlight-current-row
          stripe
          :cell-style="{ textAlign: 'center', verticalAlign: 'top',paddingTop:'20px'}"
          :header-cell-style="{ textAlign: 'center', background: '#f8f8f9' }"
          border
          max-height="500"
      >
        <el-table-column type="index" label="序号" min-width="70"/>
        <el-table-column label="开票状态" min-width="100" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ statusReturn(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="invoicingTime" label="开票时间" min-width="200" :show-overflow-tooltip="true"/>
        <el-table-column prop="theAmountOfTheInvoice" label="开票金额（元）" min-width="150"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="开票信息" min-width="350" :show-overflow-tooltip="true">
          <template #default="{row}">
            <div class="table_format">
              <p>{{ row.invoicingInfo.name }}</p>
              <p class="mls_text">{{ `统一社会信用代码：${row.invoicingInfo.code}` }}</p>
              <p>{{ `价税合计：${row.invoicingInfo.total}` }}</p>
              <p>{{ `开票人：${row.invoicingInfo.biller}` }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开票详情">
          <el-table-column label="开票详情1" min-width="300" :show-overflow-tooltip="true" class="table-column-close">
            <template #default="{row}">
              <div class="table_format">
                <p>{{ `项目名称1：${row.invoicingDetails.name}` }}</p>
                <p>{{ `单位：${row.invoicingDetails.unit} 份` }}</p>
                <p>{{ `数量：${row.invoicingDetails.quantity}` }}</p>
                <p>{{ `单价：${row.invoicingDetails.price}` }}</p>
                <p>{{ `金额：${row.invoicingDetails.amount}` }}</p>
                <p>{{ `税率/征收税：${row.invoicingDetails.taxRate} %` }}</p>
                <p>{{ `税额：${row.invoicingDetails.tax}` }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="开票详情2" min-width="300" :show-overflow-tooltip="true">
            <template #default="{row}">
              <div class="table_format">
                <p>{{ `项目名称2：${row.invoicingDetails2.name}` }}</p>
                <p>{{ `单位：${row.invoicingDetails2.unit} 份` }}</p>
                <p>{{ `数量：${row.invoicingDetails2.quantity}` }}</p>
                <p>{{ `单价：${row.invoicingDetails2.price}` }}</p>
                <p>{{ `金额：${row.invoicingDetails2.amount}` }}</p>
                <p>{{ `税率/征收税：${row.invoicingDetails2.taxRate} %` }}</p>
                <p>{{ `税额：${row.invoicingDetails2.tax}` }}</p>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination
            :total="form.data.total"
            v-model:page="form.data.pageNo"
            v-model:limit="form.data.pageSize"
            @pagination="initialize"
        />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {useCounterStore} from "@/store/counter";
import dayjs from "dayjs";
import Pagination from "@/components/Pagination/index.vue";

const route = useRoute();
const store = useCounterStore();
store.setTabsTitle(`${route.meta.title}-${route.params.id}`);

let form = reactive<{ data: Record<string, any> }>({
  data: {
    id: '',
    paymentDate: [],
    invoicingDate: [],
    paymentStartTime: "",
    paymentEndTime: "",
    invoicingStartTime: "",
    invoicingEndTime: "",
    pageNo: 1,
    pageSize: 10,
    total: 0
  }
});
const dataList = reactive<{ data: Record<string, any> }>({
  data: []
});
const statusReturn = (type: string | number) => {
  const mapType: Record<string, string> = {
    1: '已开票',
    2: '未开票',
  }
  if (mapType[type]) return mapType[type]
}
const paymentChangeTime = (e: Array<string>) => {
  if (e && e.length > 0) {
    form.data.paymentStartTime = dayjs(e[0]).format("YYYY-MM-DD 00:00:00");
    form.data.paymentEndTime = dayjs(e[1]).format("YYYY-MM-DD 23:59:59");
  } else {
    form.data.paymentStartTime = "";
    form.data.paymentEndTime = "";
  }
};
const invoicingChangeTime = (e: Array<string>) => {
  if (e && e.length > 0) {
    form.data.invoicingStartTime = dayjs(e[0]).format("YYYY-MM-DD 00:00:00");
    form.data.invoicingEndTime = dayjs(e[1]).format("YYYY-MM-DD 23:59:59");
  } else {
    form.data.invoicingStartTime = "";
    form.data.invoicingEndTime = "";
  }
}
const initialize = async () => {
  const formData = JSON.parse(JSON.stringify(form.data));
  formData.id = route.query.id
  delete formData.paymentDate;
  delete formData.invoicingDate;
  console.log(formData);
  // const resp = await baseRequest.get('/userOrder/dataOverview', formData) as any
  // dataList.data = resp.data.list
  // form.data.total = resp.data.total
  dataList.data = [
    {
      id: 1,
      status: 1,
      invoicingTime: '2022-06-12 00:00:00',
      theAmountOfTheInvoice: 2124,
      invoicingInfo: {
        name: '上海骑顺科技发展有限公司',
        code: 'JASODJASKJDKLASJDLKASJSKLJ',
        total: 232,
        biller: 'huahua'
      },
      invoicingDetails: {
        name: '经营租赁+租金',
        unit: 41212,
        quantity: 121,
        price: 4545,
        amount: 12121,
        taxRate: 40.45,
        tax: 545452
      },
      invoicingDetails2: {
        name: '',
        unit: 41212,
        quantity: 121,
        price: 4545,
        amount: 12121,
        taxRate: 40.45,
        tax: 545452
      },
    },
    {
      id: 2,
      status: 2,
      invoicingTime: '2022-06-12 00:00:00',
      theAmountOfTheInvoice: 2124,
      invoicingInfo: {
        name: '上海骑顺科技发展有限公司',
        code: 'JASODJASKJDKLASJDLKASJSKLJ',
        total: 232,
        biller: 'huahua'
      },
      invoicingDetails: {
        name: '经营租赁+租金',
        unit: 41212,
        quantity: 121,
        price: 4545,
        amount: 12121,
        taxRate: 40.45,
        tax: 545452
      },
      invoicingDetails2: {
        name: '',
        unit: 41212,
        quantity: 121,
        price: 4545,
        amount: 12121,
        taxRate: 40.45,
        tax: 545452
      },
    },
  ] as any;
  form.data.total = 50;
};
const reset = () => {
  form.data = {
    id: '',
    paymentDate: [],
    invoicingDate: [],
    paymentStartTime: "",
    paymentEndTime: "",
    invoicingStartTime: "",
    invoicingTime: "",
    pageNo: 1,
    pageSize: 10,
    total: 0
  };
  initialize();
};
onMounted(() => {
  initialize();
});
</script>
<style lang="scss" scoped>
.card_title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

:deep(.date_prefix_show .el-range__icon) {
  display: none !important;
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}

:deep(.date_prefix_close .el-range__icon) {
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}


:deep(.table-column-close .el-table thead.is-group th.el-table__cell) {
  background: #024CBE !important;
}


.table_format {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 50px;

  & p {
    margin-top: -2px;
    margin-bottom: 10px;
  }
}

.mls_text {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
